<clr-modal [(clrModalOpen)]="createOpened" [clrModalStaticBackdrop]="staticBackDrop"
            [clrModalClosable]="closable">
    <h3 class="modal-title">添加备份账号</h3>

    <div class="modal-body modal-height">
        <form clrForm #backupStorageForm="ngForm">
            <clr-input-container>
              <label>名称:</label>
              <input clrInput size=45 maxlength="15" type="text" [(ngModel)]="item.name" name="name" required>
              <clr-control-helper>最长15个字符</clr-control-helper>
            </clr-input-container>
            <clr-select-container>
              <label>类型:</label>
              <select clrSelect  name="type" [(ngModel)]="item.type" (ngModelChange)="changeType()" required>
                  <option value="OSS">oss</option>
                  <option value="S3">s3/ceph</option>
                  <option value="AZURE">azure</option>
<!--                  <option value="Ceph">ceph</option>-->
              </select>
            </clr-select-container>
            <clr-input-container *ngIf="item.type=='OSS' || item.type=='S3'">
                <label>AccessKey:</label>
                <input clrInput size=45 type="text" [(ngModel)]="credential.accessKey" name="accessKey" required>
            </clr-input-container>
            <clr-password-container *ngIf="item.type=='OSS' || item.type=='S3'">
                <label>SecretKey:</label>
                <input clrPassword size=45 type="password" [(ngModel)]="credential.secretKey" name="secretKey" required>
            </clr-password-container>
            <clr-input-container *ngIf="item.type=='OSS' || item.type=='S3'">
<!--  因为s3传endpoint 会导致验证失败 所以暂时先注释|| item.type=='S3'-->
                <label>端点:</label>
                <input clrInput size=45 type="text" [(ngModel)]="credential.endpoint" name="endpoint" required>
                <clr-control-helper *ngIf="item.type=='S3'">S3: http://s3.REGION_NAME.amazonaws.com</clr-control-helper>
                <clr-control-helper *ngIf="item.type=='S3'">S3(China): http://s3.REGION_NAME.amazonaws.com.cn</clr-control-helper>
                <clr-control-helper *ngIf="item.type=='S3'">如: http://s3.cn-north-1.amazonaws.com.cn</clr-control-helper>
                <clr-control-helper *ngIf="item.type=='OSS'">OSS: http://REGION_NAME.aliyuncs.com</clr-control-helper>
                <clr-control-helper *ngIf="item.type=='OSS'">如:http://oss-cn-hangzhou.aliyuncs.com</clr-control-helper>
            </clr-input-container>
            <clr-select-container *ngIf="item.type=='OSS' || item.type=='S3'">
              <label>桶名称:</label>
              <select clrSelect  name="bucket" [(ngModel)]="credential.bucket"  required>
                  <option *ngFor="let bucket of buckets" value="{{bucket}}">{{bucket}}</option>
              </select>
            </clr-select-container>
            <clr-input-container *ngIf="item.type=='AZURE'">
                <label>账户名称:</label>
                <input clrInput size=45 type="text" [(ngModel)]="credential.accountName" name="accountName" required>
            </clr-input-container>
            <clr-password-container *ngIf="item.type=='AZURE'">
                <label>账户密钥:</label>
                <input clrPassword size=45 type="password" [(ngModel)]="credential.accountSecret" name="accountSecret" required>
            </clr-password-container>
            <clr-select-container *ngIf="item.type=='AZURE'">
              <label>端点后缀:</label>
              <select clrSelect  name="endpoint_suffix" [(ngModel)]="credential.endpointSuffix" required>
                  <option value="core.chinacloudapi.cn">core.chinacloudapi.cn</option>
                  <option value="core.windows.net">core.windows.net</option>
              </select>
            </clr-select-container>
            <clr-select-container *ngIf="item.type=='AZURE'">
              <label>容器名称:</label>
              <select clrSelect  name="container" [(ngModel)]="credential.container"  required>
                  <option *ngFor="let bucket of buckets" value="{{bucket}}">{{bucket}}</option>
              </select>
            </clr-select-container>
            <app-modal-alert message="{{message}}" invalid="{{invalid}}" tipShow="{{tipShow}}" ></app-modal-alert>
        </form>
        <div class="modal-footer">
          <button type="button" class="btn btn-success-outline" (click)="getBuckets(credential)" [disabled]="isSubmitGoing">获取桶/容器</button>
          <button type="button" class="btn btn-outline" (click)="onCancel()" [disabled]="isSubmitGoing">取消</button>
          <button type="submit" class="btn btn-primary" (click)="onSubmit()" [disabled]="backupStorageForm.invalid">提交</button>
        </div>
    </div>
</clr-modal>
